<template>
	<section>
		<div>
			<mt-header fixed :title="this.gold?'历史持仓(模拟)':'历史持仓(实盘)'">
				<router-link to="/order" slot="left">
					<mt-button icon="back">
                        <span class="fontc1">持仓</span>
                    </mt-button>
				</router-link>
			</mt-header>
			
			<div class="mt50">
				<div class="list">
					
					<mt-loadmore :top-method="getHistory" @top-status-change="handleTopChange" ref="loadmore">
						<div slot="top" class="mint-loadmore-top">
							<span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">释放加载</span>
							<span v-show="topStatus === 'loading'">历史订单加载中···</span>
						</div>
						<ul>
							<li
								class="ml10 mr10 mt10 bgwhite shadow fs12"
								:key="idx"
								v-for="(item,idx) in order">
								<div class="wrap">
									<p class="lh35 mt5 clearfix pl10 pr10">
										<span
											class="fl"
											:class="{bggreen:item.direction==0,bgred:item.direction==1}">
											{{item.direction==1?'买涨':'买跌'}}
										</span>
										<span class="fl tl name fs14">{{item.varietyName}}</span>
										<span class="fl hand tr">{{item.handsNum}}手</span>

										<span class="fl ml5" v-show="item.orderMode==1">市</span>
										<span class="fl ml5" v-show="item.orderMode==2">高</span>

										<span class="fl">{{item.tradeMode==0?'元':'角'}}</span>
										<span class="fr loss"
										:class="{red:item.earnMoney>=0,green:item.earnMoney<0}">
											￥{{item.earnMoney*item.ratio|formatMoney()}}
										</span>
									</p>
									<p class="lh25 clearfix pl10 pr10">
										<span class="fl fs14 tl green">{{item.stopLossMoney|formatPoint(item.marketPoint)}}</span>
										<span class="fl ml10">止损价</span>
										<span class="fr ml10">买入价</span>
										<span class="fr fs14 tl">{{item.realAvgPrice|formatPoint(item.marketPoint)}}</span>
									</p>
									<p class="lh25 clearfix pl10 pr10">
										<span class="fl fs14 red">{{item.stopWinMoney|formatPoint(item.marketPoint)}}</span>
										<span class="fl ml10">止盈价</span>
										<span class="fr ml10">卖出价</span>
										<span class="fr fs14">{{item.unwindAvgPrice|formatPoint(item.marketPoint)}}</span>
									</p>
									<p class="lh25 tl ml10">
										<span class="fs14">{{item.buyTimeStr}}</span>
										<span class="ml10">买入时间</span>
									</p>
									<p class="lh25 tl ml10">
										<span class="fs14">{{item.sellTimeStr}}</span>
										<span class="ml10">卖出时间</span>
									</p>
									<p class="lh35 action" v-show="item.orderStatus==4">
										<em class="fs14">已平仓</em>
									</p>
									<p class="lh35 action" v-show="item.orderStatus!=4">
										<em class="fs14">其它状态</em>
									</p>
								</div>
							</li>
							<li class="ml10 mr10 mt10" v-show="order.length<=0">
								<p class="lh50 fs15 fontc3">暂无历史订单</p>
							</li>
						</ul>
					</mt-loadmore>					
				</div>
			</div>
		</div>
	</section>
</template>
<script>

import accounting from 'accounting'
import axios      from 'axios'
import {MessageBox,Toast,Indicator,InfiniteScroll,Spinner} from 'mint-ui'

import Vue from 'vue';

//account的配置更改
accounting.settings = {
	currency: {
		symbol : "",   // default currency symbol is '$'
		format: "%s%v", // controls output: %s = symbol, %v = value/number (can be object: see below)
		decimal : ".",  // decimal point separator
		thousand: ",",  // thousands separator
		precision : 2   // decimal places
	},
	number: {
		precision : 0,  // default precision on numbers is 0
		thousand: ",",
		decimal : "."
	}
}
import {mapState,mapGetters,mapMutations,Loadmore} from 'vuex';

export default {
	name: "HistoryOrder",
	components : {
		"mt-spinner": Spinner,
	},
	data () {
		return {
			curPage: 0,
			order: [],

			topStatus: '',
		}
	},
	created () {
		this.getHistory();
	},
	mounted () {
		
	},
	computed : {
		...mapState(['gold']),
	},
	methods : {
		handleTopChange(status) {
			this.topStatus = status;
		},
		getHistory () {
			// Indicator.open('订单加载中');
			axios({
				methods: "get",
				url: '/order/newOrder/findNewOrderHistory.do',
				params: {
					payType:this.gold?0:1,
					limit:  this.curPage,
					pageSize: 5,
				}
			})
			.then((res) => {
				// Indicator.close();
				res = res.data;
				if (res.code == 200) {
					if (res.data.length <= 0) {
						Toast('未获取到历史订单')
					} else {
						res.data = res.data.reverse();
						res.data.forEach((value) => {
							if (value.direction == 0) {
								value.earnMoney = (value.realAvgPrice - value.unwindAvgPrice) * value.eachPointMoney * value.handsNum * value.tradeRate;
							};
							if (value.direction == 1) {
								value.earnMoney = (value.unwindAvgPrice - value.realAvgPrice) * value.eachPointMoney * value.handsNum * value.tradeRate;
							};
							this.order.unshift(value);
						});
					}
				} else if(res.code == 503){
					Toast('请先登录');
					this.$router.push({
						path: "/login"
					})
				} else {
					MessageBox(res.msg?res.msg:'出错');
				}
			})
			.then(() => {
				this.curPage += 5;
				this.$refs.loadmore.onTopLoaded();
			})
		},
	},
	watch : {
		
	},
	filters : {
		formatMoney (money) {
			return accounting.formatMoney(money);
		},
		formatPoint (price,point) {
			if (price) {
				return price.toFixed(point);
			} else {
				return '0';
			}
		}
	}
}
</script>
<style scoped>
	.list li{
		box-sizing: border-box;
		border-radius: 5px;
		overflow: hidden;
		color: #7C7A7F;
	}
	.list li p:first-child span:first-child{
		width: 40px;
		height: 24px;
		line-height: 24px;
		border-radius: 4px;
		margin-top: 5px;
		margin-right: 5px;
		color: #fff;
	}
	.name{
		width: 45px;
	}
	.hand{
		width: 40px;
	}
	.list li p:first-child{
		border-bottom: 1px solid #e2e2e2;
	}
	.action{
		text-align: center;
		border-top: 1px solid #e2e2e2;
	}
	.action span{
		width: 25%;
		box-sizing: border-box;
	}
	.action strong{
		margin: 0 auto;
	}
	.action span:last-child{
		border-right: 0 none;
	}


	@media screen and (min-height: 736px) {
		body {
			font-size: 12px;
		}
		body .fs14{
			font-size: 14px;
		}
		body .fs12{
			font-size: 12px;
		}
	}
</style>









